<template>
    <div>
        <!-- 查询表单 -->
        <div class="check-form-box">
            <el-form :inline="true" :model="searchModel.data" class="demo-form-inline">
                <el-form-item label="省份">
                    <el-input v-model="searchModel.shenfen" placeholder="请输入省份" />
                </el-form-item>
                <el-form-item label="类型">
                    <el-select v-model="searchModel.leixin" placeholder="请选择">
                        <el-option label='全部' :value=null />
                        <el-option label='货车' value='0' />
                        <el-option label='客车' value='1' />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" color="#ea5b24" @click="search()">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" color="#ea5b24" @click="showDialog(0, null)">添加</el-button>
                </el-form-item>
            </el-form>
        </div>

        <!-- 列表 -->
        <div>
            <el-table :data="tableData.data" style="width: 100%">
                <el-table-column prop="" label="序号" />
                <el-table-column prop="" label="省份" />
                <el-table-column prop="" label="车辆类型" />
                <el-table-column prop="" label="价格" />
                <el-table-column fixed="right" width="120" label="操作">
                    <template v-slot:default="scope">
                        <el-button link type="primary" size="small" @click="showDialog(1, scope.row)">编辑</el-button>
                        <el-button link type="primary" size="small" @click="showDialog(1, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页插件 -->
            <div style="text-align: center">
                <el-pagination :total="totalNum" @current-change="handleCurrentChange" background :page-size="size"
                    layout="prev, pager, next, total" :current-page="page" />
            </div>
        </div>

        <!--添加/编辑管理员表单 -->
        <el-dialog v-model="dialogVisible" :title="dialogTitle" center="true" modal="true" width="22%">
            <el-form :model="model" :rules="rules" ref="ruleFormRef">
                <el-form-item label="车辆类型:" :label-width="formLabelWidth">
                    <el-radio-group v-model="model.carType">
                        <el-radio :label="1">货车</el-radio>
                        <el-radio :label="2">客车</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="省份:" :label-width="formLabelWidth">
                    <el-input v-model="model.shengfen" style="width: 150px;" autocomplete="off" />
                </el-form-item>
                <el-form-item label="价格:" prop="price" :label-width="formLabelWidth">
                    <el-input-number :precision="2" v-model="model.price" :controls="false" :min="0" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="formSubmit(ruleFormRef)" color="#ea5b24">保存</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
  
<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { ElMessage, ElMessageBox, FormInstance, FormRules } from "element-plus";
import { findUniversalConfigApi, addUniversalConfigApi, editUniversalConfigApi } from "../../../api/index";
import { formatDateTime } from "../../../utils/formatDateTime";
import { usePermissStore } from "../../../store/permiss";
const pinia = usePermissStore();

// 分页列表数据
let tableData: any = reactive([]);
const totalNum = ref(0);
const page = ref(1);
const size = 8;

const formLabelWidth = "125px";
// 控制对话框
const dialogVisible = ref(false);
const dialogTitle = ref("");
const dialogType = ref(0);
const editFormLabelWidth = "80px";
// 搜索模型
const searchModel: any = reactive({
    shenfen: null,
    leixin: null,
    page: page,
    size: size,
});
// 添加/编辑模型
const model = reactive({
    id: null,
    carType: null,
    shengfen: null,
    price: null,
});

//表单校验
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules>({
    // generalType: [{ required: true, message: "请输入KEY", trigger: 'blur' }]
})

// 翻页
let flipData = reactive({
    page: page,
    size: size
});
const handleCurrentChange = (val: number) => {
    page.value = val;
    flipData.page = page.value;
    searchConfig(flipData);
};

// 控制添加/编辑dialog显示
const showDialog = (type: number, row) => {
    dialogVisible.value = true;
    dialogType.value = type;
    ruleFormRef.value ? ruleFormRef.value.clearValidate() : false;
    if (type === 0) {
        //添加管理员
        dialogTitle.value = "添加配置";
        Object.keys(model).forEach((key) => (model[key] = ""));
    } else {
        //编辑管理员
        dialogTitle.value = "编辑配置";
        model.id = row.id;
        // model.generalType = row.generalType;
        // model.generalContent = row.generalContent;
        // model.remake = row.remake;
    }
}

/**
 * 添加/编辑
 */
const formSubmit = (formEl) => {
    if (!formEl) return
    formEl.validate(valid => {
        if (valid) {
            if (dialogType.value === 0) {
                addUniversalConfigApi(model).then((res) => {
                    if (res.data.code === 2000) {
                        ElMessage({
                            message: "添加成功.",
                            type: "success",
                        });
                        searchConfig(searchModel);
                    } else {
                        switch (res.data.code) {
                            case 4001:
                                ElMessage.error('key已存在，请勿重复配置.');
                                break;
                            default:
                                ElMessage.error('添加失败.');
                                break;
                        }
                    }
                });
            } else {
                editUniversalConfigApi(model).then((res) => {
                    if (res.data.code === 2000) {
                        ElMessage({
                            message: "编辑成功.",
                            type: "success",
                        });
                        searchConfig(searchModel);
                    } else {
                        switch (res.data.code) {
                            case 4001:
                                ElMessage.error('未找到对应的配置.');
                                break;
                            default:
                                ElMessage.error('编辑失败.');
                                break;
                        }
                    }
                });
            }
            Object.keys(model).forEach((key) => (model[key] = ""));
            dialogVisible.value = false;
        } else {
            return false
        }
    })
};

// 搜索提现订单
const search = () => {
    page.value = 1;
    if (searchModel.createDate) {
        searchModel.startTime = formatDateTime(searchModel.createDate[0])
        searchModel.endTime = formatDateTime(searchModel.createDate[1]).replace("00:00:00", "23:59:59");
    } else {
        searchModel.startTime = null;
        searchModel.endTime = null;
    }
    searchParmSearch();
    searchConfig(searchModel);
    flipData = JSON.parse(JSON.stringify(searchModel));
};

// 搜索参数检查
const searchParmSearch = () => {
    Object.keys(searchModel).forEach((key) => {
        if (!searchModel[key]) {
            searchModel[key] = null;
        }
    });
};

//条件查询配置列表
const searchConfig = (searchModel) => {
    findUniversalConfigApi(searchModel).then((res) => {
        if (res.data.code === 2000) {
            tableData.data = res.data.data.data;
            totalNum.value = res.data.data.total;
        } else {
            ElMessage.error("查询失败");
        }
    });
};

onMounted(() => {
    searchConfig(searchModel);
});
</script>
  
<style></style>